<template>
  <!-- 订单详情页 -->
  <div>
    <!-- {{ info }} -->
    <div class="header">
       <el-button type="primary" @click="backTo">返回</el-button>
    </div>
    <!-- 订单编号 -->
    <!-- {{ info }} -->
    <div class="content">
      <el-table :data="getInfo" style="width: 100%">
        <el-table-column prop="id" label="订单项编号"> </el-table-column>
        <el-table-column prop="productId" label="产品编号"> </el-table-column>
        <el-table-column prop="product.name" label="产品"> </el-table-column>
        <el-table-column label="产品图片">
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.product.photo"
              :preview-src-list="[scope.row.product.photo]"
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="单价"> </el-table-column>
        <el-table-column prop="number" label="数量"> </el-table-column>
      </el-table>
    </div>
    <div class="card">
      <el-card class="box-card" style="width: 300px">
        <div slot="header" class="clearfix">
          <span>订单基本信息</span>
        </div>
        <div>
          <div><span>订单编号：</span>{{ info.id }}</div>
          <div><span>订单金额：</span>{{ info.total }}</div>
          <div><span>下单时间：</span>{{ info.orderTime | reallyTime }}</div>
          <div><span>订单状态：</span>{{ info.status }}</div>
        </div>
      </el-card>
      <el-card
        class="box-card"
        style="width: 300px"
        v-if="info.employeeId != null"
      >
        <div slot="header" class="clearfix">
          <span>接单者信息</span>
        </div>
        <div>
          <span>接单者：</span>{{ info.employee.username }}
          <div><span>接单者手机号：</span>{{ info.employee.telephone }}</div>
        </div>
      </el-card>
      <el-card
        class="box-card"
        style="width: 300px"
        v-if="info.customerId != null"
      >
        <div slot="header" class="clearfix">
          <span>下单者信息</span>
        </div>
        <div class="text item">
          <div><span>下单者：</span>{{ info.customer.username }}</div>
          <div><span>下单者手机号：</span>{{ info.customer.telephone }}</div>
        </div>
      </el-card>
      <el-card
        class="box-card"
        style="width: 300px"
        v-if="info.customerId != null"
      >
        <div slot="header" class="clearfix">
          <span>雇主信息</span>
        </div>
        <div class="text item">
          <div><span>雇主：</span>{{ info.address.username }}</div>
          <div><span>雇主手机号：</span>{{ info.customer.telephone }}</div>
          <div v-if="info.address != null">
            <span>服务地址：</span>{{ info.address.province
            }}-{{ info.address.city }}-{{ info.address.area }}-{{info.address.address}}
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { get } from "@/utils/request";
import moment from "moment";
export default {
  data() {
    return {
      info: "",
      sentId: {
        id: this.$route.query.thisId,
      },
      getInfo: [],
    };
  },
  filters: {
    reallyTime: function (date) {
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },
  },
  computed: {},
  methods: {
    backTo(){
      this.$router.go(-1)
    },
    async getDetailInfo() {
      let res = await get("/order/findById", this.sentId);
      this.info = res.data;
      this.getInfo = res.data.orderLines;
      // console.log(res.data.orderLines);
    },
  },
  created() {
    this.getDetailInfo();
  },
  mounted() {},
};
</script>
<style scoped>
.card .box-card {
  float: left;
  margin-top: 20px;
  margin-left: 10px;
}
</style>